<template>
	<div class="footer-status">
		<div class="app-info">
			<!-- <div class="cif-version">CIF v1.3.0</div> -->
			<div class="cif-mode-info">{{ activeEngineType }}</div>
			<div class="canvas-size">
				<div :class="state.canvasSizeOptionsVisible ? 'active' : ''" @click="showCanvasSizeOptions">
					{{ state.canvasSizeOptions[state.selectedCanvasSizeIndex].label }}
				</div>
				<div v-if="state.canvasSizeOptionsVisible" class="canvas-options">
					<div
						:class="getOptionClass(index)"
						:key="index"
						v-for="(option, index) in state.canvasSizeOptions"
						@click="selectCanvasSize(option, index)">
						{{ option.label }}
					</div>
				</div>
			</div>
		</div>
		<div class="random-help-text">
			<el-color-picker v-model="themeColor" size="small" />
			<el-button type="primary" size="small" @click="onChangeThemeColorClick">修改主题色</el-button>
		</div>
		<div class="action-bar">
			<div class="btn" @click="toggleFullScreen" aria-label="进入全屏预览" title="进入全屏预览">
				<img :src="fullScreenPng" />
			</div>
			<div
				:class="leftPanelVisible ? 'btn active' : 'btn'"
				@click="toggleLeftPanel"
				aria-label="打开或隐藏左侧面板"
				title="打开或隐藏左侧面板">
				<img :src="leftSidebarPng" />
			</div>
			<div
				:class="rightPanelVisible ? 'right-panel btn active' : ' right-panel btn'"
				@click="toggleRightPanel"
				aria-label="打开或隐藏右侧面板"
				title="打开或隐藏右侧面板">
				<img :src="leftSidebarPng" />
			</div>
			<div></div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, toRefs, computed, ref } from 'vue';
import { RUNTIME_CFG_ENUM } from '@CIF/Runtime/Global/variable';
import StorageHelper from '@CIF/Runtime/Global/storage';
import _ from 'lodash';
import fullScreenPng from '../assets/maximize.svg';
import leftSidebarPng from '../assets/sidebar.svg';
import { usePrimaryStore } from '@/store';
import { ElMessage } from 'element-plus';
import * as theme from '@CIF/Runtime/Global/theme';

const store = usePrimaryStore();
const cifMode = ref(StorageHelper.get(RUNTIME_CFG_ENUM.CIF_MODE));
const state = reactive({
	fullScreenPng,
	leftSidebarPng,

	canvasSizeOptionsVisible: false,
	selectedCanvasSizeIndex: 0,
	isCustomSize: false,
	canvasSizeOptions: [
		{
			label: '自适应',
			value: {
				width: '100vw',
				height: '100vh'
			}
		},
		{
			label: '4096 x 2160',
			value: {
				width: '4096px',
				height: '2160px'
			}
		},
		{
			label: '2560 x 1440',
			value: {
				width: '2560px',
				height: '1440px'
			}
		},
		{
			label: '1920 x 1080',
			value: {
				width: '1920px',
				height: '1080px'
			}
		},
		{
			label: '1366 x 768',
			value: {
				width: '1366px',
				height: '768px'
			}
		},
		{
			label: '自定义',
			value: {
				width: '1366px',
				height: '768px'
			}
		}
	]
});

const activeEngineType = computed(() => {
	switch (store.getActiveEngineType) {
		case 'MAPBOX':
		case 'MAPLIBRE':
		case 'AMAP':
		case 'TMAP':
		case 'BMAP':
			return 'MAP模式';
		case 'SUPERMAP':
			return 'GIS模式';
		case 'BIMBASE':
		case 'XBASE':
		case 'XBASE':
			return 'BIM模式';
		default:
			return '...';
	}
});

const modeName = computed(() => {
	if (cifMode.value === 'edit_mode') {
		return '编辑模式';
	} else if (cifMode.value === 'preview_mode') {
		return '预览模式';
	}
	return '本地开发模式';
});
// const canvasSize = computed(() => {
// 	const size = store.getRendererCanvasSize;
// 	return `${size.width} x ${size.height}`;
// });
const leftPanelVisible = computed(() => {
	return store.getLeftPanelVisible;
});
const rightPanelVisible = computed(() => {
	return store.getRightPanelVisible;
});

function toggleFullScreen() {
	store.setFullScreenState(true);
}
function showCanvasSizeOptions() {
	state.canvasSizeOptionsVisible = !state.canvasSizeOptionsVisible;
}
function toggleLeftPanel() {
	store.setLeftPanelVisible(!leftPanelVisible.value);
}
function toggleRightPanel() {
	store.setRightPanelVisible(!rightPanelVisible.value);
}
function getOptionClass(index: number | string) {
	if (index === state.selectedCanvasSizeIndex) {
		return 'current';
	}
	if (index === state.canvasSizeOptions.length - 1) {
		return 'disable';
	}
	if (state.isCustomSize === true) {
		return 'disable';
	}
	return '';
}
function selectCanvasSize(option: any, index: any) {
	if (option.label === '自定义大小') {
		ElMessage.info('自定义画布大小选项需要设置 CUSTOM_RENDERER_CANVAS_SIZE');
		return;
	}
	if (state.isCustomSize === true) {
		ElMessage.info('自定义画布大小选项下选择其他画布类型请先清除 CUSTOM_RENDERER_CANVAS_SIZE 设置');
		return;
	}
	store.setRendererCanvasSize(option.value);
	state.canvasSizeOptionsVisible = false;
	state.selectedCanvasSizeIndex = index;
}
// 修改主题色
const themeColor = ref('#0c75c5');
function onChangeThemeColorClick() {
	theme.setGTheme(themeColor.value);
	const el = document.documentElement;
	// const body = document.querySelector('body');
	el.style.setProperty('--el-color-primary', themeColor.value);
	// body.style.setProperty('--van-primary-color', themeColor.value);
}

onMounted(() => {});
defineExpose({ ...toRefs(state) });
</script>

<style lang="scss" scoped>
$layerMgrFontSize: 14px;
$layerMgrTitleHeight: 24px;
$height: 22px;
$lineHeight: 22px;
$canvasSizeMenuHeight: calc(22px * 6 + 1px);

$btnBackground: rgba(255, 255, 255, 0.24);
$disableBackground: rgba(255, 255, 255, 0.12);
$borderBackground: rgba(255, 255, 255, 0.32);

.footer-status {
	width: 100%;
	height: $height;
	line-height: $lineHeight;
	font-size: $layerMgrFontSize;
	box-sizing: border-box;
	color: var(--white);
	background-color: var(--dropdown-background);
	box-shadow: #000000 0px -3px 6px 0px;
	display: flex;

	.app-info {
		display: flex;

		.cif-version {
			width: 6rem;
			text-align: center;
			background-color: #a173e2;
		}

		.cif-mode-info {
			width: 8rem;
			text-align: center;
			background-color: var(--primary-active);
		}
		.canvas-size {
			width: 8rem;
			text-align: center;
			cursor: pointer;
			background-color: $btnBackground;

			/* &:hover {
        background-color: var(--primary-active);
      }

      &.active {
        background-color: $hoverBackground;
      } */

			.canvas-options {
				position: relative;
				bottom: 22px;
				height: $canvasSizeMenuHeight;
				transform: translateY(-$canvasSizeMenuHeight);
				background: var(--dropdown-background);
				border: solid 1px var(--primary-overlay); //var(--primary-active);
				border-bottom: none;
				box-shadow:
					-5px -5px 10px -4px black,
					5px -5px 10px -4px black;

				& > div {
					&:hover {
						background-color: var(--primary-hover);
						/* box-shadow: 0px 0px 1px 1px black; */
					}
					&.disable {
						cursor: not-allowed;
						background-color: $disableBackground;
					}
					&.current {
						background-color: var(--primary-active);
					}
				}
			}
		}
	}

	.random-help-text {
		text-align: center;
		flex: 1;
		display: flex;
		justify-content: end;
		:deep(.el-color-picker--small .el-color-picker__trigger) {
			width: 22px;
			height: 22px;
			margin-right: 5px;
		}
		:deep(.el-color-picker__trigger) {
			border: 0;
		}
		:deep(.el-button) {
			height: 21px;
		}
		:deep(.el-select__wrapper) {
			height: 21px;
			min-height: 21px;
			margin-right: 20px;
		}
	}

	.action-bar {
		display: flex;
		padding: 0 8px;

		.btn {
			height: $height;
			width: 22px;
			padding: 1px;
			box-sizing: border-box;
			margin: 0 1px;
			cursor: pointer;
			background-color: unset;

			&:hover {
				background-color: var(--primary-hover);
			}

			img {
				height: 100%;
				width: 100%;
			}

			&.active {
				background-color: var(--primary-active);
			}
		}

		.full-screen {
		}
		.left-panel {
		}
		.right-panel {
			transform: rotate(180deg);
		}
	}
}
</style>
